<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <script src="../js/jquery/jquery.js"></script>
    <script src="../js/jquery_mobile/jquery.mobile-1.4.2.js"></script>
    <link rel="stylesheet" href="../css/jquery_mobile/jquery.mobile-1.4.2.css"/>

    <script src="../js/jquery/jquery.validate.js"></script>
    <script src="../js/jquery/jquery.form.js"></script>
    <script>
        //表单验证
        $("#registerForm").validate();
        $(function(){
            var opt = {
                url:"",
                success:showresponse,
                dataType:'json'
            }

            function showresponse(responseText,responseXML){
                alert("根据respnseText的内容进行判断和跳转界面");
            }
            /**
             * 这边点击按钮进行提交
             * 我使用了ajax form，是一个插件
             * 官方文档：http://www.vaikan.com/docs/jquery.form.plugin/jquery.form.plugin.html
             */
            $("#registerForm").ajaxForm(opt);
        });
    </script>

</head>
<body>
<div data-theme="b" data-role="header">
    <a href="#" data-rel="back" class="ui-btn ui-corner-all ui-shadow ui-icon-back ui-btn-icon-left ui-btn-icon-notext">Back</a>
    <h1 class="ui-title">
        用户注册
    </h1>
</div>
<div role="main" class="ui-content">
    <form method="post" action="#" id="registerForm">
        <div class="ui-field-contain" data-controltype="textinput">
            <label for="name">
                <em>* </em>用户名：
            </label>
            <input name="name" id="name" placeholder="字母或者汉字" type="text" required>
        </div>
        <div class="ui-field-contain" data-controltype="textinput">
            <label for="password">
                <em>* </em>密码：
            </label>
            <input name="password" id="password" placeholder="字母，数字不得少于6" minlength="6" type="password" required>
        </div>
        <div class="ui-field-contain" data-controltype="textinput">
            <label for="phone">
                <em>* </em>手机号码：
            </label>
            <input name="phone" id="phone" placeholder="手机号码" minlength="11" type="tel" required>
        </div>

        <div class="ui-block-a" style="width: 100%"><input class="submit" type="submit" value="注册" data-theme="a"></div>
    </form>
</div>
</body>
</html>